<template>
  <div class="flex column module-inner">
    <div class="module-title">
      <img alt="" src="/image/download-5.png">
      客户增长趋势
    </div>
    <div id="container-customerGrowth" ref="container" class="content common-module-bg"/>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'CustomerGrowth',
  components: {},
  props: {
    moduleData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      charts: null
    }
  },
  watch: {
    'moduleData.length'() {
      this.init()
    }
  },
  beforeDestroy() {
    echarts.dispose(this.charts)
    this.charts = null
  },
  mounted() {
    // console.log(this.moduleData)
    // this.init()
  },
  methods: {
    init() {
      const chartData = this.moduleData.reduce(
        (cur, item) => {
          return {
            year: [...cur.year, item.year],
            count: [...cur.count, item.count]
          }
        },
        {
          year: [],
          count: []
        }
      )
      const options = {
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: chartData.year,
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff',
              fontSize: this.$fontSize(0.1)
            }
          },
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff',
              fontSize: this.$fontSize(0.1)
            }
          },
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        grid: {
          left: this.$fontSize(0.1),
          right: this.$fontSize(0.18),
          bottom: this.$fontSize(0.1),
          top: this.$fontSize(0.15),
          containLabel: true
        },

        series: [
          {
            data: chartData.count,
            type: 'line',
            smooth: true,
            areaStyle: {
              color: echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: 'rgb(35, 65, 105, 1)'
                  },
                  {
                    offset: 0.8,
                    color: 'rgb(35, 65, 105, .1)'
                  }
                ],
                false
              )
            },
            itemStyle: {
              normal: {
                color: '#8cd5c2', // 改变折线点的颜色
                lineStyle: {
                  color: '#3cadff' // 改变折线颜色
                }
              }
            }
          }
        ]
      }
      this.charts = echarts.init(
        this.$refs.container,
        null,
        {
          renderer: 'svg'
        }
      )
      // this.charts.showLoading({
      //   text: '',
      //   color: 'rgb(79, 142, 195)',
      //   textColor: '#000',
      //   maskColor: 'rgba(255, 255, 255, 0)',
      //   zlevel: 10
      // })
      this.charts.setOption(options, true)
      this.charts = {
        resize: this.charts.resize
      }
      // setTimeout(() => {
      //   charts.hideLoading()
      // }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "src/styles/conversion.scss";

.module-inner {
  height: 100%;
}

.content {
  flex: 230;
}
</style>
